<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block class="text-white" slot="content">预约详细</block>
		</cu-custom>
		<view>
			<view class="text-gray text-sm flex justify-between padding bg-white">
				<view v-if="aroomyyjl.tflg != 'C'">
					<text class="bg-green padding-xs round" v-if="aroomyyjl.pflg">已支付</text>
					<text class="bg-red padding-xs round" v-else="aroomyyjl.pflg">未支付</text>
				</view>
				<view>
					<text v-if="aroomyyjl.tflg == 'P'">未开始</text>
					<text v-else-if="aroomyyjl.tflg == 'S'">已开始</text>
					<text v-else-if="aroomyyjl.tflg == 'F'">已结束</text>
					<text v-else-if="aroomyyjl.tflg == 'R'">提款中</text>
					<text v-else-if="aroomyyjl.tflg == 'T'">已提款</text>
					<text class="text-red" v-else-if="aroomyyjl.tflg == 'C'">已取消</text>
					<text v-else-if="aroomyyjl.tflg == 'J'">退款中</text>
					<text v-else-if="aroomyyjl.tflg == 'E'">已退款</text>
				</view>
			</view>
		
			<view v-if="aroomyyjl.tflg != 'C'" class="">
				<view class="cu-card case bg-white">
					<view class="cu-item shadow">
						<view class="image">
							<image :src="aroom.cover" mode="widthFix"></image>
							<view class="cu-bar bg-blue flex flex-direction padding align-start">
								<view class="text-cut text-lg">{{aroom.rname}}</view>
								<view class="text-cut">
									<text>{{aroom.mj}}㎡</text>
									<text>{{aroom.yjds}}个垫子</text>
									<text>容纳 {{aroom.mj}}人</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
			<view>
				<view class="cu-item shadow bg-white padding">
					<view class="cu-list menu-avatar">
						<view class="cu-item flex align-center ">
							<view @tap="message.chat(ajiaolian.clientid)" class="cu-avatar round xl" :style="{backgroundImage: `url(${ajiaolian.cover})`}">
							</view>
							<view class="content flex-sub margin-left">
								<view class="flex justify-between ">
									<view>{{ajiaolian.jlname}}</view>
								</view>
								<view class="flex justify-between align-center margin-top-xs">
									<uni-rate size="15" readonly="true" v-model="ajiaolian.count" max="5"></uni-rate>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		
		
			<view v-if="aroomyyjl.tflg != 'C'" class="margin-top">
				<view class="cu-form-group">
					<view class="title">时段</view>
				</view>
				<view>
					<yyjl-dates :dateYyjl="dates" />
				</view>
			</view>
		
		
		
		</view>
		<view v-if="aroomyyjl.tflg != 'C'" class="padding bg-white flex justify-between align-center">
			<view v-if="isEdPrice" class="flex justify-start">
				<text>合计金额：</text>
				<input class="solid " v-model="aroomyyjl.amont" />
			</view>
			<view v-else>
				<text>合计金额：{{aroomyyjl.amont/100}}</text>
			</view>
		
		
			<view>
				<button v-if="isEdPrice" @click="isEdPrice = false; aroomyyjl.amont*=100;"
					@tap="save"
					class="cu-btn bg-green round sm margin-left-xs">保存</button>
				<view v-else>
					<button v-if="!aroomyyjl.pflg" @click="isEdPrice = true; aroomyyjl.amont/=100;"
						class="cu-btn bg-blue round sm">改价</button>
				</view>
		
		
			</view>
		</view>
		<!-- <view v-if="aroomyyjl.tflg == 'P'" class="padding ">
			<button @click="cancel" class="cu-btn block bg-red lg">取消</button>
		</view> -->
	</view>
</template>

<script>
	import yyjlBydatesVue from './yyjlBydates.vue';
	export default {
		components: {
			"yyjl-dates": yyjlBydatesVue
		},
		data: function() {
			return {
				rmorderid: "",
				diffInSeconds: 0,
				isEdPrice: false,
				aroomyyjl: {},
				aroom: {},
				ajiaolian: {},
				checkedDates: {},
				dates: {

				}
			};
		},
		onLoad(option) {
			this.rmorderid = option.rmorderid;
			this.loadyyjl();
		},
		methods: {
			loadyyjl: function() {
				this.api("/yy/info/get").send({
					rmorderid: this.rmorderid,
				}).then(data => {
					this.aroomyyjl = data.aroomyyjl;
					this.ajiaolian = data.ajiaolian;
					this.aroom = data.aroom;
					this.dates = data.dates;
				});
			},
			save: function() {
				this.api('/yy/info/put').send({
					aroomyyjl: {
						rmorderid: this.aroomyyjl.rmorderid,
						amont: this.aroomyyjl.amont
					}
				}).then(data => {
					this.message.info("改价成功");
				});
			},
		}
	}
</script>

<style>
</style>